﻿@model BBICMS.Model.Position

@{
    ViewBag.Title = Model.PositionId > 0 ? "编辑广告位" : "添加广告位";
    ViewBag.PageTitle = ViewBag.Title + "_广告管理";
    Layout = "~/Areas/bbi_Admin/Views/Shared/_LayoutAdmin.cshtml";
}

@section header{
    <style>
        #success-msg-container,
        #fail-msg-container,
        #delete-msg-container {
            display: none;
        }
    </style>
}

@section footer{
    <script src="~/Content/Admin/js/ace/positionsDataService.js"></script>
    <script>
        $(function () {

            var
            positionDataForm = $("#position-data-form")[0],
            progressBar = $('#progress-bar');

            var Blog = function () {
                this.positionId = ko.observable("@Model.PositionId");
                this.title = ko.observable("@Model.Title");
                this.importance = ko.observable("@Model.Importance");
                this.active = ko.observable("@Model.Active");
                this.addedBy = ko.observable("@Model.AddedBy");
                this.addedDate = ko.observable("@Model.AddedDate")
                this.updatedBy = ko.observable("@Model.UpdatedBy");
                this.updatedDate = ko.observable("@Model.UpdatedDate");
                this.description = ko.observable("@Model.Description");
            };

            var ViewModel = function (position) {
                this.model = position;

                this.errorMessage = ko.observable();

                this.hideProgressBar = function (showAfterHideFunc) {
                    progressBar.fadeOut(function () {
                        showAfterHideFunc();
                    });
                };

                this.showError = function (error) {
                    var resetUI = function () {
                        $('#command-buttons').fadeIn();
                        $('#fail-msg-container').fadeIn();
                    };

                    vm.hideProgressBar(resetUI);

                    if (error.statusText) {
                        vm.errorMessage(error.statusText);
                    }

                    if (error.responseText) {
                        var
                            msg = JSON.parse(error.responseText),
                            keys = _.keys(msg),
                            txt = '';

                        _.each(keys, function (key) {
                            txt += msg[key] + ' ';
                        });
                        vm.errorMessage(txt);
                    }
                };




                this.showSuccess = function () {
                    var resetUI = function () {
                        $('#command-buttons').fadeIn();
                        $('#fail-msg-container').fadeOut();
                        $('#delete-msg-container').fadeOut();
                        $('#success-msg-container').fadeIn();
                    };

                    vm.hideProgressBar(resetUI);

                    var fadeOut = function () {
                        $('#success-msg-container').fadeOut()
                    };

                    _.delay(fadeOut, 5000);
                };

                this.showDelete = function () {
                    $('#fail-msg-container').fadeOut();
                    $('#delete-msg-container').fadeIn();

                    $('.cmd').each(function (i, element) {
                        $(element).prop('disabled', true).addClass('muted');
                    });
                }



                this.save = function () {


                    var validationUtility = new ValidationUtility();

                    if (validationUtility.validate('position-data-form')) {
                        $('#command-buttons').hide();
                        $('#progress-bar').fadeIn();


                        var position = ko.toJS(this.model);
                        debugger;
                        positionsDataService.save(position).done(function (response) {
                            if (response.positionId) {
                                vm.model.positionId(response.positionId);
                            }



                            vm.showSuccess();

                           
                        }).fail(function (error) {
                            vm.showError(error);
                        });
                    }
                };


                this.requestDelConfirm = function () {
                    $('#del-confirm').modal();
                };


                this.del = function () {
                    var position = ko.toJS(this.model);
                    positionsDataService.del(position).done(function (response) {
                        vm.showDelete();
                    }).fail(function (error) {
                        vm.showError(error);
                    }).always(function () {
                        $('#del-confirm').modal('hide');
                    });
                };


            };


            var vm = new ViewModel(new Blog());
            ko.applyBindings(vm);

            H5F.setup([positionDataForm], {
                validClass: "valid",
                invalidClass: "invalid",
                requiredClass: "required"
            });
        })


        //当前菜单
        $(function () {
            $('.mainmenu>li').eq(3).addClass('nav-open').find('.submenu li').eq(1).children('a').addClass('active');
        });
    </script>

}

<div class="toolbar">
    <a href="#" class="showmenu"><i class="fa fa-bars"></i></a>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index","Home")"><i class="glyphicon glyphicon-home"></i> 控制面板</a></li>
        <li><a href="#">广告管理</a></li>
        <li class="active">@ViewBag.Title</li>
    </ol>
</div>
<div class="main-content">



    <div class="box">
        <header class="box-header">
            <h3><i class="glyphicon glyphicon-edit"></i> @ViewBag.Title</h3>
            <div class="control">
                <a href="#" class="expand"><i class="fa fa-expand"></i></a>
                <a href="#" class="compress"><i class="fa fa-compress"></i></a>
            </div>
        </header>

        <section class="box-body">
            <!-- left column -->
          
             <div class="well well-sm">
                 <a href="@Url.Action("PositionList","Ad")" class="btn btn-default"><i class="glyphicon glyphicon-arrow-left"></i> 返回</a>
             </div>

            <form class="form-horizontal" id="position-data-form">

                <div class="form-group">
                    @Html.LabelFor(model => model.Title, new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-6">
                        <input type="text" data-role="validate" data-content="分类名称不能为空." autofocus
                               data-bind="value:model.title" class="form-control" required />
                    </div>
                </div>




                <div class="form-group">
                    @Html.LabelFor(model => model.Importance, new { @class = "col-sm-2 control-label" })

                    <div class="col-sm-6">
                        <input type="number" data-role="validate" data-content="排序不能为空，且为数字。" data-bind="value:model.importance" class="form-control" required />
                    </div>

                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })

                    <div class="col-sm-6">
                        <textarea data-bind="value: model.description"
                                  id="description" name="description"
                                  class="form-control" required
                                  title="描述"
                                  data-role="validate"
                                  data-content="描述不能为空."></textarea>
                    </div>

                </div>


                <div class="form-group">

                    <div class="col-sm-offset-2 col-sm-6">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" data-bind="checked: model.active" /> @Html.DisplayNameFor(model => model.Active)
                            </label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div id="progress-bar"
                             class="progress progress-striped active hide">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                <span class="sr-only">100% Complete</span>
                            </div>
                        </div>

                        <div style="margin-bottom:10px" id="command-buttons">
                            <a href="#" id="delete-link" class="btn btn-danger cmd"
                               data-bind="click: requestDelConfirm"
                               tabindex="-1">删除</a>
                            <input type="button" value="保存" class="btn btn-primary cmd" data-bind="click: save" formnovalidate />
                            @Html.ActionLink("返回", "PositionList", null, new { @class = "btn btn-default" })
                        </div>
                        <div id="fail-msg-container"
                             class="alert alert-danger fade in">
                            <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
                            <h4>错误</h4>
                            <p>
                                Oops, something bad happened!
                                This is what the server has to say about it:
                            </p>
                            <p data-bind="text: errorMessage"></p>
                        </div>

                        <div id="success-msg-container"
                             class="alert alert-success fade in">

                            <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

                            <h4>保存成功</h4>
                            <p>
                                此博客分类已经被保存。
                            </p>
                        </div>

                        <div id="delete-msg-container"
                             class="alert alert-info fade in">
                            <a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>
                            <h4>博客分类已经被删除</h4>
                            <p>
                                此博客分类已经从系统中删除，
                                您可以
                                @Html.ActionLink("返回博客分类列表", "Index", "Blog")。
                            </p>
                        </div>

                    </div>
                </div>
                @{
                    if (Model.PositionId > 0)
                    {
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <p class="text-muted">
                                    @Html.LabelFor(model => model.AddedBy)：<span data-bind="text:model.addedBy"></span>；@Html.LabelFor(model => model.AddedDate)：<span data-bind="text:model.addedDate"></span>；
                                    @Html.LabelFor(model => model.UpdatedBy)：<span data-bind="text:model.updatedBy"></span>；@Html.LabelFor(model => model.UpdatedDate)：<span data-bind="text:model.updatedDate"></span>
                                </p>
                            </div>
                        </div>
                    }
                }
            </form>



           


        </section>
        <footer class="box-footer"></footer>

    </div>
</div>
<!-- end main container -->



<div id="del-confirm" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="del-confirm-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">
                    ×
                </button>
                <h3 id="del-confirm-label">Confirm Delete</h3>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this product?</p>
                <p class="alert alert-error push-down">
                    <strong>Note:</strong>
                    There is no undo for this action.
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                <button class="btn btn-primary" data-bind="click: del">删除分类</button>
            </div>
        </div>
    </div>
</div>
